var React = require('react');
import { Row, Col } from 'antd';
import { Menu, Icon, Tabs, message, Form, Input, Button, CheckBox, Modal } from 'antd';
const SubMenu = Menu.SubMenu;
const TabPane = Tabs.TabPane
const FormItem = Form.Item;
const MenuItemGroup = Menu.ItemGroup;
class PcHeader extends React.Component{
	constructor(){
		super();
		this.state = {
			current:'top',
			modalVisible:false,
			action:'login',
			hasLogined:false,
			userNickName:'',
			userid:0
		}
	}
	setModalVisible(value){
		this.setState({
			modalVisible:value,
		})
	}
	handleClick(e){
		if(e.key='register'){
			this.setState({
				current:'register',
			})
			this.setModalVisible(true)
		}else{
			this.setState({
				current: e.key,
			})
		}
	}
	handleSubmit(e){
		//页面提交
		e.preventDefault();//阻止默认事件
		var myFetchOptions = {
			methods:'GET'
		};
		var formData = this.props.form.getFieldsValue();
		console.log(formData)
//		fetch('地址').then(response=>response.json()).then(json=>{
//			//赋值
//		});
		message.succsee('请求成功 ！')
		this.setModalVisible(false)
	}
	render() {
		const { getFieldProps } = this.props.form;
		const userShow = this.state.hasLogined 
		? <Menu.Item key='logout' className='register'>
			<Button type='primary' htmlType='button'>{this.state.userNickName}</Button>
			<Link target = '_blank'>
				<Button type='dashed' htmlType='button'>个人中心</Button>
			</Link>
			<Button type='ghost' htmlType='button'>退出</Button>
		  </Menu.Item>
		: <Menu.Item key='register' className='register'>
				<Icon type='appstore'/> 注册/登录
		  </Menu.Item>
		return (
			<header>
				<Row>
				  <Col span={2}></Col>
				  <Col span={4}>
				  	<a href="/" className="logo">
				  		<img src="/src/images/logo.jpg" alt="logo" />
				  		<span>ReactNews</span>
				  	</a>
				  </Col>
				  <Col span={16}>
				  	<Menu mode='horizontal' onClick={this.handleClick.bind(this)} selectedKeys={[this.state.current]}>
				  		<Menu.Item key='top'>
				          <Icon type="mail" />头条
				        </Menu.Item>
				        <Menu.Item key='shehui'>
				          <Icon type="mail" />社会
				        </Menu.Item>
				        <Menu.Item key='guonei'>
				          <Icon type="mail" />国内
				        </Menu.Item>
				        <Menu.Item key='guoji'>
				          <Icon type="mail" />国际
				        </Menu.Item>
				        <Menu.Item key='yule'>
				          <Icon type="mail" />娱乐
				        </Menu.Item>
				        <Menu.Item key='tiyu'>
				          <Icon type="mail" />体育
				        </Menu.Item>
				        <Menu.Item key='keji'>
				          <Icon type="mail" />科技
				        </Menu.Item>
				        <Menu.Item key='shishang'>
				          <Icon type="mail" />时尚
				        </Menu.Item>
				        {userShow}
				  	</Menu>
				  	
				  	<Modal
			          title="用户中心"
			          wrapClassName='verticl-center-modal'
			          visible={this.state.modalVisible}
			          onOk={()=>this.setModalVisible(false)}
			          onCancel={()=>this.setModalVisible(false)}
			          okText='确认'
			          cancelText="取消"
			        >
			           <Tabs type='card' defaultActiveKey="1">
						    <TabPane tab="注册" key="1">
						    	<Form onSubmit={this.handleSubmit.bind(this)}>
							    	<FormItem label='账户'>
							    		<Input placeholder='请输入您的账号' {...getFieldProps('r_userNname')}/>
							    	</FormItem>
							    	<FormItem label='密码'>
							    		<Input type='password' placeholder='请输入您的密码' {...getFieldProps('r_passwrod')}/>
							    	</FormItem>
							    	<FormItem label='确认密码'>
							    		<Input type='password' placeholder='请确认您的密码不能' {...getFieldProps('r_confirmPassword')}/>
							    	</FormItem>
							    	<Button type="primary" htmlType='submit'>注册</Button>
							    </Form>
						    </TabPane>
						</Tabs>
			        </Modal>
				  	
				  </Col>
				  <Col span={2}></Col>
				</Row>
			</header>
		);
	}
}
export default PcHeader = Form.create({})(PcHeader);